<template>
  <g-table :columns="tabaleColumns" :data="tableData">
    <template slot-scope="{ row, index }" slot="name">
      <input type="text" v-model="nameValue" v-if="currentRow === index" />
      <span style="color: #f60" v-else>{{ row.name }}</span>
    </template>
  </g-table>
</template>

<script>
export default {
  data() {
    return {
      tabaleColumns: [
        {
          title: '姓名',
          key: 'name',
          slot: 'name',
          // render: (h, { row, index }) => {
          //   let edit
          //   if (this.currentRow === index) {
          //     edit = h('g-input', {
          //       props: {
          //         value: row.name,
          //       },
          //       on: {
          //         input: value => {
          //           this.nameValue = value
          //         },
          //       },
          //     })
          //   } else {
          //     edit = row.name
          //   }
          //   return h('div', [edit])
          // },
        },
        {
          title: '年龄',
          key: 'age',
          render: (h, { row, index }) => {
            let edit
            if (this.currentRow === index) {
              edit = h('g-input', {
                props: {
                  value: row.age,
                },
                on: {
                  input: value => {
                    this.ageValue = value
                  },
                },
              })
            } else {
              edit = row.age
            }
            return h('div', [edit])
          },
        },
        {
          title: '出生日期',
          render: (h, { row, index }) => {
            let edit
            if (this.currentRow === index) {
              edit = h('g-input', {
                props: {
                  value: row.birthday,
                },
                on: {
                  input: value => {
                    this.birthdayValue = value
                  },
                },
              })
            } else {
              const date = new Date(parseInt(row.birthday))
              const year = date.getFullYear()
              const month = date.getMonth() + 1
              const day = date.getDate()
              const birthday = `${year}-${month}-${day}`
              edit = birthday
            }
            return h('div', [edit])
          },
        },
        {
          title: '地址',
          key: 'address',
        },
        {
          title: '操作',
          render: (h, { row, index }) => {
            if (this.currentRow === index) {
              // 编辑模式
              return [
                h(
                  'button',
                  {
                    on: {
                      click: () => {
                        this.tableData[index].name = this.nameValue
                        this.tableData[index].age = this.ageValue
                        this.tableData[index].birthday = this.birthdayValue
                        this.tableData[index].address = this.addressValue
                        this.currentRow = -1
                      },
                    },
                  },
                  '保存',
                ),
                h(
                  'button',
                  {
                    style: {
                      marginLeft: '8px',
                    },
                    on: {
                      click: () => {
                        this.currentRow = -1
                      },
                    },
                  },
                  '取消',
                ),
              ]
            } else {
              // 非编辑模式
              return h(
                'button',
                {
                  on: {
                    click: () => {
                      this.currentRow = index
                      this.nameValue = row.name
                      this.ageValue = row.age
                      this.birthdayValue = row.birthday
                      this.addressValue = row.address
                    },
                  },
                },
                '修改',
              )
            }
          },
        },
      ],
      tableData: [
        {
          name: '王小明',
          age: 18,
          birthday: '919526400000',
          address: '北京市朝阳区芍药居',
        },
        {
          name: '张小刚',
          age: 25,
          birthday: '696096000000',
          address: '北京市海淀区西二旗',
        },
        {
          name: '李小红',
          age: 30,
          birthday: '563472000000',
          address: '上海市浦东新区世纪大道',
        },
        {
          name: '周小伟',
          age: 26,
          birthday: '687024000000',
          address: '深圳市南山区深南大道',
        },
      ],
      currentRow: -1,
      nameValue: '',
      ageValue: '',
      birthdayValue: '',
      addressValue: '',
    }
  },
}
</script>
